<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - MAN旗舰店</title>
    <link rel="stylesheet" href="css/product.css">
</head>
<body>
    <header class="header">
        <!-- 同首页的头部 -->
    </header>

    <main class="product-container">
        <div class="breadcrumb">
            <a href="index.html">首页</a> > <span id="productCategory">商品分类</span> > <span id="productName">商品名称</span>
        </div>

        <div class="product-detail">
            <div class="product-gallery">
                <div class="main-image">
                    <img src="" alt="" id="mainImage">
                </div>
                <div class="thumbnail-list">
                    <!-- 缩略图将通过 JavaScript 动态加载 -->
                </div>
            </div>

            <div class="product-info">
                <h2 class="product-title" id="productTitle">商品名称</h2>
                <p class="product-subtitle" id="productDescription">商品描述</p>
                <div class="price-section">
                    <span class="current-price" id="productPrice">¥0.00</span>
                </div>
                <div class="sales-info">
                    <!-- 销售信息将通过 JavaScript 动态加载 -->
                </div>
                <div class="product-options">
                    <!-- 商品选项将通过 JavaScript 动态加载 -->
                </div>
                <div class="quantity-control">
                    <button class="quantity-btn minus">-</button>
                    <input type="number" class="quantity-input" value="1" min="1">
                    <button class="quantity-btn plus">+</button>
                </div>
                <div class="action-buttons">
                    <button class="btn add-to-cart" data-id="">加入购物车</button>
                    <button class="btn buy-now" data-id="">立即购买</button>
                </div>
            </div>
        </div>

        <!-- 商品规格、评论、问答等内容 -->
        <div class="product-specs">
            <!-- 商品规格将通过 JavaScript 动态加载 -->
        </div>
        <div class="product-reviews">
            <!-- 商品评论将通过 JavaScript 动态加载 -->
        </div>
        <div class="product-qna">
            <!-- 商品问答将通过 JavaScript 动态加载 -->
        </div>

        <div class="recommended-products">
            <h3>相关推荐商品</h3>
            <div class="product-list">
                <!-- 推荐商品将通过 JavaScript 动态加载 -->
            </div>
        </div>
    </main>

    <footer class="footer">
        <!-- 同首页的页脚 -->
    </footer>

    <script src="js/utils.js"></script>
    <script src="js/product-detail.js"></script>
</body>
</html>